<template>
  <el-form label-width="100px" size="small">
    <el-row gutter="40" style="height: 600px;overflow-y: scroll">
      <el-col :span="8">
        <el-form-item label="流程编号：" style="width: 100%;">
          {{ detailData.processNo }}
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="创建时间：" style="width: 100%;">
          {{ dateFormat('yyyy-mm-dd HH:MM',detailData.startTime) }}
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="创建人：" style="width: 100%;">
          {{ detailData.initiator }}
        </el-form-item>
      </el-col>
      <el-col :span="24" style="padding-left: 0;padding-right: 0">
        <item-title title="基本信息" />
      </el-col>
      <el-col :span="8">
        <el-form-item label="代理商编号：">
          <span>{{ detailData.data?.agentNumber }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="代理商名称：">
          <span>{{ detailData.data?.agentName }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item
          label="统一社会信用码："
          label-width="140px"
        >
          <span>{{ detailData.data?.creditCode }}</span>
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="详细地址：">
          <span>{{detailData.data?.address}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="联系人：">
          <span>{{ detailData.data?.userName }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item  label="企业所在地区：" label-width="140px">
          <span>{{detailData.data.provinceName}}/{{detailData.data.cityName}}/{{detailData.data.areaName}}
          </span>
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="联系电话：">
          <span>{{ detailData.data?.tel }}</span>
        </el-form-item>
      </el-col>

      <el-col :span="24" style="padding-left: 0;padding-right: 0">
        <item-title title="首营资质" />
      </el-col>
      <el-col :span="24">
        <el-form-item prop="businessLicenseFiles" label-width="0">
          <div class="qualityFiles-container">
            <div v-for="(item,index) in detailData.data?.businessLicenseFiles" :key="index" class="file-item">
              <image-upload-view ref="imageUploadView" disabled="true" :data="item" />
            </div>
          </div>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import {reactive, toRefs, watch} from 'vue'

export default {
  name: 'Index',
  props: {
    detailData: {
      type: Object,
      default() {
        return {
          data: {}
        }
      }
    }
  },
  setup(props) {
    var data = reactive({
      detailData: {}
    })
    watch(() => props.detailData, (newval, oldval) => {
      if (newval) {
        data.detailData = newval
        console.log(data.detailData.data?.businessLicenseFiles, '-------------')
      }
    },
    { immediate: true, deep: true }
    )
    return {
      ...toRefs(data)
    }
  }

}

</script>

<style scoped>
  /* @import url(); 引入css类 */
  .qualityFiles-container {
    display: flex;
    flex-wrap: wrap;
  }
</style>
